import { createApp } from 'vue'
// element-plus UI组件和样式引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { ElLoading } from 'element-plus'
// element-plus 图标引入
import * as ElIcons from '@element-plus/icons-vue'
// ajax请求
import axios from "axios";
//日期格式化插件
import moment from 'moment'
// 路由
import router from "./router/router";
// 导入全局数据管理
import { createPinia } from 'pinia'
// 导入滑动验证和其样式
// @ts-ignore
import MakeitCaptcha from 'makeit-captcha'
import 'makeit-captcha/dist/captcha.min.css'
import App from './App.vue'

const app = createApp(App)

axios.defaults.baseURL = 'http://localhost:3000/api'

// let loadingInstance:any = null
//
// // axios 请求和响应拦截器
// axios.interceptors.request.use(config => {
//     //加载loading效果
//     loadingInstance = ElLoading.service({lock: true, text: '加载数据中......', background: 'rgba(0, 0, 0, 0.7)',})
//     return config
// })
//
// axios.interceptors.response.use(response => {
//     //取消loading
//     loadingInstance.close()
//     return response
// })

// 日期格式化
const dateFormat = (date:string) => {
    return moment(date).format('YYYY-MM-DD HH:mm:ss')
}

// 挂载全局axios
app.config.globalProperties.$http = axios
app.config.globalProperties.$moment = moment

app.config.globalProperties.$dateFormat = dateFormat



// 全局导入所欲element 图标
for (const name in ElIcons){
    app.component(name,(ElIcons as any)[name])
}

// 挂载路由
app.use(router)
// 注册全局Element-plus 组件
app.use(ElementPlus)
// 挂载全局数据集
app.use(createPinia())
// 挂载话动验证
app.use(MakeitCaptcha)

// 注册的全局指令
app.directive('focus', (el) => {
    el.querySelector('input').focus()
})

app.mount('#app')
